<template>
  <div class="me_search">
    <el-dialog
      title="添加部门"
      :visible.sync="SelectGroupListData.dialogVisible"
      class="small"
      height="50%"
      :before-close="handleClose"
      :modal-append-to-body="false"
    >
      <div class="box">
        <div class="left">
          <div class="left-top">
            <div class="inputDeep">
              <el-autocomplete
                v-model="input"
                :fetch-suggestions="querySearchAsync"
                placeholder="搜索部门"
                @select="handleSelect"
              />
            </div>
            <div class="button">
              <!-- closable -->
              <el-tag
                v-for="(tag, index) in tableDataList"
                :key="index"
                :disable-transitions="tag.isTag === true"
                class="tag"
                @close="handleCloses(tag)"
              >
                {{ tag.label }}
              </el-tag>
            </div>
          </div>
          <div class="left-but">
            <el-button type="primary" @click="confirm">确 定</el-button>
            <el-button @click="handleClose">取 消</el-button>
          </div>
        </div>
        <div class="right">
          <el-collapse
            v-model="activeNames"
            accordion
            :class="{ itembox: itembox }"
            class="collapse"
          >
            <el-collapse-item name="1">
              <template slot="title">
                <i class="iconfont header-icon el-icon-allzuzhijiagou4" />
                <p class="p1">组织架构</p>
              </template>
              <div
                v-for="(item2, index2) in classifyList"
                :key="index2"
                class="classif"
                @click="goClassIf(index2)"
              >
                <i class="i1 iconfont" :class="item2.icon" />
                <p class="p2">{{ item2.name }}</p>
              </div>
            </el-collapse-item>
          </el-collapse>
          <div class="content" :class="{ goclassif: isActive }">
            <p class="p3" @click="toClassIf">
              <i class="el-icon-arrow-left i3" /> 组织架构
            </p>
            <el-table
              ref="tableData"
              height="35vh"
              :data="getData"
              style="width: 100%"
              :show-header="false"
              :select-on-indeterminate="true"
              :row-key="getRowKeys"
              :tree-props="{ children: 'children' }"
              @select="handleSelectionChange"
            >
              <!--  -->
              <el-table-column
                type="selection"
                width="55"
                :reserve-selection="true"
                :selectable="checkboxT"
              />
              <el-table-column prop="label" />
            </el-table>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" />
    </el-dialog>
  </div>
</template>

<script>
import { getBranchList } from '@/api/uc/search.js'
import { expandArr } from '@/utils/common.js'

import '@/styles/search.scss'
export default {
  components: {},
  props: ['SelectGroupListData'],
  data() {
    return {
      classifyList: [
        { id: '1', name: '部门', icon: 'el-icon-alltuanduiguanli' }
      ],
      groupUserTree: [],
      roleUserTree: [],
      getData: [],
      itembox: false,
      isActive: true,
      dataList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      permissionIds: [],
      input: '',
      breadcrumb: [],
      checkedGh: [],
      activeNames: ['1'],
      ObjList: '',
      tableDataList: [],
      searchList: [],
      newArr: [],
      groupIdLits: [],
      updateList: [],
      isLink: 1
    }
  },
  computed: {},
  watch: {
    async groupIdLits(data) {
      this.initData(this.getData, 0)
      await this.updateTree(this.getData, data, this.getData)
      await this.updateSelectionsStatus(this.getData)
      await this.updateTableDataList()
      this.$forceUpdate()
    },
    SelectGroupListData(data) {
      this.groupIdLits = data.groupIdLits || []
    },
    isLink() {}
  },
  mounted() {
    this.getSearch()
  },
  methods: {
    // /

    getRowKeys(row) {
      return row.id
    },
    //
    dialogVisibles() {
      this.SelectGroupListData.dialogVisible = true
      this.breadcrumb = []
    },
    getMsgFormSon(data) {
      this.dataList = data
    },
    handleClose(done) {
      this.dataList = []
      this.updateList = []
      this.SelectGroupListData.dialogVisible = false
    },
    parentFn(payload) {
      this.dataList = payload
    },
    // //////
    goClassIf(index) {
      this.isActive = false
      this.itembox = true
      if (index === 0) {
        this.getData = this.groupUserTree || []
      }

      this.updateSelectionsStatus(this.getData)
    },
    toClassIf() {
      this.isActive = true
      this.itembox = false
      this.breadcrumb = []
    },
    // 搜索
    querySearchAsync(queryString, cb) {
      var restaurants = this.newArr
      var results = queryString
        ? this.createStateFilter(queryString)
        : restaurants
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 1000 * Math.random())
    },
    createStateFilter(queryString) {
      const data = []
      const list = this.newArr || []
      list.forEach((item) => {
        if (item.label.indexOf(queryString) === 0) {
          item.value = item.label
          data.push(item)
        }
      })
      return data
    },
    async handleSelect(item) {
      this.input = ''
      item.isChecked = true
      await this.groupIdLits.push(item)
    },
    // 获取数据
    async getSearch() {
      const getDataList = await getBranchList()
      this.groupUserTree = getDataList.data.groupUserTree
      this.getData = getDataList.data.groupUserTree
      this.newArr = expandArr(getDataList.data.groupUserTree)
    },

    // tag回调
    async handleCloses(tag) {
      await this.cleanTree(this.getData, tag)
      await this.updateSelectionsStatus(this.getData)
      await this.updateTableDataList()
    },

    checkboxT(row) {
      if (row.isTag === true || row.id === '1') {
        return false
      } else {
        return true
      }
    },
    async handleSelectionChange(selection, row) {
      if (row.children) {
        if (!row.isChecked) {
          row.isChecked = true
          row.children.map((item) => {
            item.isChecked = true
          })
        } else {
          row.isChecked = false
          row.children.map((item, index) => {
            item.isChecked = false
          })
        }
      } else {
        if (row.isChecked) {
          row.isChecked = false
        } else {
          row.isChecked = true
        }
      }
      await this.updateSelectionsStatus(this.getData)
      await this.updateTableDataList()
    },
    confirm() {
      this.SelectGroupListData.dialogVisible = false
      this.$emit('UserGroupListData', this.tableDataList)
      this.updateList = []
    },
    updateTree(data, tree, fatherNode) {
      let toIndex = 0
      data.forEach((e) => {
        if (e.children) {
          this.updateTree(e.children, tree, e)
        }

        tree.forEach((item, index) => {
          if (e.id === item.id) {
            toIndex = toIndex + 1
            e.isChecked = true
            e.isTag = item.isTag || false
            if (fatherNode.isLength === toIndex) {
              fatherNode.isChecked = true
              fatherNode.isTag = true
            } else {
              fatherNode.isChecked = false
              fatherNode.isTag = false
            }
          }
        })
      })
    },
    cleanTree(data, tree) {
      data.forEach((e) => {
        if (e.children) {
          this.cleanTree(e.children, tree)
        }

        if (e.id === tree.id) {
          e.isChecked = false
          if (e.children) {
            e.children.forEach((res) => {
              res.isChecked = false
            })
          }
        }
      })
    },
    updateSelectionsStatus(data) {
      data.forEach((e) => {
        if (e.children) {
          this.updateSelectionsStatus(e.children)
        }
        if (e.isChecked) {
          this.$refs.tableData.toggleRowSelection(e, true)
        } else {
          this.$refs.tableData.toggleRowSelection(e, false)
        }
      })
    },
    updateTableDataList() {
      const Arr = expandArr(this.getData) || []
      const newArr = []
      Arr.forEach((e) => {
        if (e.isChecked) {
          newArr.push(e)
        }
      })
      this.tableDataList = newArr
    },
    initData(data, index) {
      const i = index + 1
      data.forEach((item, index2) => {
        item.Tier = i
        item.isChecked = false // 默认为不选中
        if (item.children && item.children.length) {
          item.isLength = item.children.length || 0
          this.initData(item.children, i)
        }
      })
    }
  }
}
</script>



